<template>
  <list-detail-layout class="ecuDetailLayout">
    <template #detailMain>
      <ecu-detail-main :tbData="tbData" v-bind="{ecuModuleId:ecuModuleId,numType:numType}" v-if="id">
      </ecu-detail-main>
    </template>
    <template #detailRight>
      <div class="h100 ecuDetailRight">
        <ecu-base-info :detailBaseInfoData="detailBaseInfoData" :loading-data="spinningLoading" class="baseInfo">
        </ecu-base-info>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import EcuDetailMain from './EcuDetailMain'
import EcuBaseInfo from './EcuBaseInfo'
import ecuApi from '@/api/modules/system/ecuMana'
import { mapState } from 'vuex'
export default {
  components: {
    EcuDetailMain,
    EcuBaseInfo,
    ListDetailLayout
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    ecuModuleId: {
      type: String,
      default: ''
    },
    numType: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    }),
    detailBaseInfoData () {
      if (!this.detailData) {
        return {}
      }
      return this.detailData
    },
    tbData () {
      if (!this.detailData) {
        return []
      }
      return this.detailData.ecuModels.filter(item => item.ecuAssembleType !== 0)
    }
  },
  watch: {
    instantUpdateTime: {
      handler () {
        this.getDetailData()
      },
      immediate: true
    }
  },
  data () {
    return {
      spinningLoading: false,
      detailData: null,
      // 相关联任务的ids
      linkedTaskIds: []
    }
  },
  methods: {
    // 获取车型详情数据
    getDetailData () {
      this.detailData = null
      if (!this.id) {
        return
      }
      this.spinningLoading = true
      ecuApi.getEcuInfor({ id: this.id }).then(res => {
        this.detailData = res.data
      }).finally(() => {
        this.spinningLoading = false
      })
    },
    setLinkedTaskIds (data) {
      if (!data) {
        return
      }
      this.linkedTaskIds = data
    }
  }
}
</script>
<style lang="less" scoped>
.ecuDetailRight {
  display: flex;
  flex-direction: column;
  .baseInfo {
    flex:none;
  }
}
</style>
<style lang="less">
.ecuDetailLayout {
  .tabCommon {
    .ant-tabs-bar {
      .ant-tabs-nav {
        .ant-tabs-tab {
          padding: 0 0 6px 0;
        }
      }
    }
  }
}
</style>
